<template>
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todos</h1>
        <input class="new-todo" autofocus="" autocomplete="off" placeholder="What needs to be done?" v-model="newDoRef"
          @keyup.enter="addListRef" />
      </header>
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" :checked="allTodosRef"
          @input="event => changeAlltodo(event.target.checked) " />
        <label for="toggle-all">Mark all as complete</label>
        <ul class="todo-list">
          <li class="todo" :class="{ completed: item.isFinish, editing: item === editingTodoRef }"
            v-for="item in filterTodoRef" :key="item.id" @dblclick="clickEdit(item)">
            <div class="view">
              <input class="toggle" type="checkbox" v-model="item.isFinish" />
              <label>{{ item.content }}</label>
              <button class="destroy"></button>
            </div>
            <input class="edit" type="text" v-model="item.content" @blur="fulfilledEdit" @keyup.enter="fulfilledEdit"
              @keyup.escape="cancelEdit(item)" />
          </li>
        </ul>
      </section>
      <footer class="footer">
        <span class="todo-count">
          <strong>{{ activeLengthRef }}</strong>
          <span>item{{ activeLengthRef > 1 ? 's' : '' }} left</span>
        </span>
        <ul class="filters">
          <li><a href="#/all" :class="{ selected: visiblityRef=== 'all'}">All</a></li>
          <li><a href="#/active" :class="{ selected: visiblityRef === 'active' }">Active</a></li>
          <li><a href="#/completed" :class="{ selected: visiblityRef === 'completed' }">Completed</a></li>
        </ul>
        <button class="clear-completed" v-show="computedLengthRef > 0">
          Clear completed
        </button>
      </footer>
    </section>
  </div>
</template>

<script>
import { useTodoList } from './composition/useTodoList.js'
import { useNewTodo } from './composition/useNewTodo.js'
import { useFilter } from './composition/useFilter.js'
import { useEditTodo } from './composition/useEditTodo.js'

export default {
  setup() {
    const { todoListRef } = useTodoList()
    return {
      ...useNewTodo(todoListRef),
      ...useFilter(todoListRef),
      ...useEditTodo(todoListRef)
    }
  }
}
</script>
